<template>
  <div class="call-Phone">
    <div class="info">
      <span class="label">{{ t('common.product.productName') }}：</span>
      <span class="name" @click="toProductDetail(content.productId)">{{ content.productName }}</span>
    </div>
    <div class="info">
      <span>{{ t('common.product.productNo') }}：</span>
      <span>{{ content.serialNumber }}</span>
    </div>
    <div class="info">
      <span class="label">{{t('system.customerPhone')}}：</span>
      <span>{{ content.customerPhone }}<biz-call-icon :value="content.customerPhone" /></span>
    </div>
    <div class="info">
      <span class="label">{{t('system.messageTime')}}：</span>
      <span>{{ formatDate(content.messageDate,'YYYY-MM-DD HH:mm:ss') }}</span>
    </div>
  </div>
</template>

<script>
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { t } from '@src/locales';
import { formatDate } from 'pub-bbx-utils'

export default {
  name: 'CallPhone',
  props: {
    messageInfo: {
      type: Object,
      default: {}
    }
  },
  computed: {
    content(){
      return this.messageInfo?.content??{}
    }
  },
  data() {
    return {
    }
  },
  methods: {
    t,
    formatDate,
    // 跳转到产品详情
    toProductDetail(productId) {
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductView,
        key: productId,
        params: 'noHistory=1',
      })
    },
  }
}
</script>

<style scoped lang='scss'>
.call-Phone {
  .info {
    color: $text-color-primary;
    @include text-ellipsis();

    .name {
      cursor: pointer;
      color: $color-primary;
    }
  }
}
</style>